<template>
  <div class="login-page">
    <!-- 科技风格背景装饰 -->
    <div class="tech-background">
      <div class="tech-grid"></div>
      <div class="tech-circles">
        <div class="circle circle-1"></div>
        <div class="circle circle-2"></div>
        <div class="circle circle-3"></div>
      </div>
      <div class="tech-lines">
        <div class="line line-1"></div>
        <div class="line line-2"></div>
        <div class="line line-3"></div>
      </div>
    </div>
    
    <h1 class="title">SVG 短 链 平 台</h1>
    <div class="login-container">
      <div class="login-box">
        <!-- 登录 -->
        <div class="logon" :class="{ hidden: !isLogin }">
          <div class="form-header">
            <div class="header-icon">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <h2>用户登录</h2>
            <p class="subtitle">欢迎使用SVG短链平台</p>
          </div>
          
          <el-form ref="loginFormRef1" :model="loginForm" label-width="50px" :rules="loginFormRule" class="tech-form">
            <div class="form-container1">
              <el-form-item prop="phone">
                <el-input v-model="loginForm.username" placeholder="请输入用户名" maxlength="11" show-word-limit clearable>
                  <template v-slot:prepend>
                    <div class="input-icon">
                      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      </svg>
                    </div>
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item prop="password">
                <el-input v-model="loginForm.password" type="password" clearable placeholder="请输入密码" show-password>
                  <template v-slot:prepend>
                    <div class="input-icon">
                      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect x="3" y="11" width="18" height="11" rx="2" ry="2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <circle cx="12" cy="16" r="1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M7 11V7C7 5.67392 7.52678 4.40215 8.46447 3.46447C9.40215 2.52678 10.6739 2 12 2C13.3261 2 14.5979 2.52678 15.5355 3.46447C16.4732 4.40215 17 5.67392 17 7V11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      </svg>
                    </div>
                  </template>
                </el-input>
              </el-form-item>
            </div>
            
            <div class="form-options">
              <el-checkbox class="remeber-password" v-model="checked">记住密码</el-checkbox>
              <a href="#" class="forgot-password">忘记密码？</a>
            </div>
            
            <div class="btn-group">
              <el-button :loading="loading" @keyup.enter="login" type="primary" class="login-btn"
                @click="login(loginFormRef1)">
                <span>登录</span>
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M12 5L19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </el-button>
            </div>
          </el-form>
        </div>
        
        <!-- 注册 -->
        <div class="register" :class="{ hidden: isLogin }">
          <div class="form-header">
            <div class="header-icon">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16 21V19C16 17.9391 15.5786 16.9217 14.8284 16.1716C14.0783 15.4214 13.0609 15 12 15C10.9391 15 9.92172 15.4214 9.17157 16.1716C8.42143 16.9217 8 17.9391 8 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <h2>用户注册</h2>
            <p class="subtitle">创建您的账户</p>
          </div>
          
          <el-form ref="loginFormRef2" :model="addForm" label-width="40px" class="tech-form" :rules="addFormRule">
            <el-form-item prop="username">
              <el-input v-model="addForm.username" placeholder="请输入用户名" maxlength="11" show-word-limit clearable>
                <template v-slot:prepend>
                  <div class="input-icon">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      <circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                  </div>
                </template>
              </el-input>
            </el-form-item>
            
            <el-form-item prop="mail">
              <el-input v-model="addForm.mail" placeholder="请输入邮箱" show-word-limit clearable>
                <template v-slot:prepend>
                  <div class="input-icon">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      <polyline points="22,6 12,13 2,6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                  </div>
                </template>
              </el-input>
            </el-form-item>
            
            <el-form-item prop="phone">
              <el-input v-model="addForm.phone" placeholder="请输入手机号" show-word-limit clearable>
                <template v-slot:prepend>
                  <div class="input-icon">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M22 16.92V19.92C22.0011 20.1985 21.9441 20.4742 21.8325 20.7293C21.7209 20.9844 21.5573 21.2136 21.3521 21.4019C21.1469 21.5902 20.9046 21.7335 20.6407 21.8227C20.3769 21.9119 20.0975 21.9452 19.82 21.92C16.7428 21.5856 13.787 20.5341 11.19 18.85C8.77382 17.3146 6.72533 15.2661 5.18999 12.85C3.49997 10.2412 2.44824 7.27099 2.11999 4.18C2.09477 3.90347 2.12787 3.62476 2.21649 3.36162C2.30512 3.09849 2.44756 2.85669 2.63476 2.65162C2.82196 2.44655 3.0498 2.28271 3.30351 2.17052C3.55722 2.05833 3.83149 2.00026 4.10999 2H7.10999C7.59522 1.99522 8.06569 2.16708 8.43373 2.48353C8.80177 2.79999 9.04201 3.23945 9.10999 3.72C9.23662 4.68007 9.47144 5.62273 9.80999 6.53C9.94454 6.88792 9.97348 7.27675 9.89381 7.65319C9.81415 8.02963 9.62877 8.36836 9.35999 8.62L8.08999 9.89C9.51355 12.4135 11.5865 14.4865 14.11 15.91L15.38 14.64C15.6316 14.3712 15.9704 14.1858 16.3468 14.1062C16.7232 14.0265 17.1121 14.0555 17.47 14.19C18.3773 14.5286 19.3199 14.7634 20.28 14.89C20.7658 14.9585 21.2094 15.2032 21.5265 15.5775C21.8437 15.9518 22.0122 16.4297 22 16.92Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                  </div>
                </template>
              </el-input>
            </el-form-item>
            
            <el-form-item prop="realName">
              <el-input v-model="addForm.realName" placeholder="请输入姓名" show-word-limit clearable>
                <template v-slot:prepend>
                  <div class="input-icon">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      <circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                  </div>
                </template>
              </el-input>
            </el-form-item>

            <el-form-item prop="password">
              <el-input v-model="addForm.password" type="password" clearable placeholder="请输入密码" show-password>
                <template v-slot:prepend>
                  <div class="input-icon">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect x="3" y="11" width="18" height="11" rx="2" ry="2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      <circle cx="12" cy="16" r="1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      <path d="M7 11V7C7 5.67392 7.52678 4.40215 8.46447 3.46447C9.40215 2.52678 10.6739 2 12 2C13.3261 2 14.5979 2.52678 15.5355 3.46447C16.4732 4.40215 17 5.67392 17 7V11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                  </div>
                </template>
              </el-input>
            </el-form-item>
            
            <div class="btn-group">
              <el-button :loading="loading" @keyup.enter="login" type="primary" class="login-btn"
                @click="addUser(loginFormRef2)">
                <span>注册</span>
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M12 5L19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </el-button>
            </div>
          </el-form>
        </div>
        
        <!-- 切换面板 -->
        <div class="switch-panel" ref="moveRef">
          <div class="switch-content">
            <div class="switch-icon">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <h3>{{ !isLogin ? '已有账号？' : '还没有账号？' }}</h3>
            <p>{{ !isLogin ? '欢迎登录账号！' : '欢迎注册账号！' }}</p>
            <el-button class="switch-btn" @click="changeLogin">
              {{ !isLogin ? '去登录' : '去注册' }}
            </el-button>
          </div>
        </div>
      </div>
    </div>
    
    <div ref="vantaRef" class="vanta"></div>
  </div>
  
  <!-- 人机验证对话框 -->
  <el-dialog v-model="isWC" title="人机验证" width="40%" :before-close="handleClose" class="tech-dialog">
    <div class="verification-flex">
      <span>扫码下方二维码，关注后回复：<strong><span style="color:var(--el-color-primary);">link</span></strong>，获取拿个offer-SaaS短链接系统人机验证码</span>
      <img class="img" src="@/assets/png/公众号二维码.png" alt="">
      <el-form class="form" :model="verification" :rules="verificationRule" ref="verificationRef">
        <el-form-item prop="code" label="验证码">
          <el-input v-model="verification.code" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="isWC = false">取消</el-button>
        <el-button type="primary" @click="verificationLogin(verificationRef)">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { setToken, setUsername, getUsername } from '@/core/auth.js'
import { ref, reactive, onMounted, onBeforeUnmount, watch, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import * as THREE from 'three'
import WAVES from 'vanta/src/vanta.waves'
const { proxy } = getCurrentInstance()
const API = proxy.$API
const loginFormRef1 = ref()
const loginFormRef2 = ref()
const router = useRouter()
const loginForm = reactive({
  username: '',
  password: '',
})
const addForm = reactive({
  username: '',
  password: '',
  realName: '',
  phone: '',
  mail: ''
})

const addFormRule = reactive({
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    {
      pattern: /^1[3|5|7|8|9]\d{9}$/,
      message: '请输入正确的手机号',
      trigger: 'blur'
    },
    { min: 11, max: 11, message: '手机号必须是11位', trigger: 'blur' }
  ],
  username: [{ required: true, message: '请输入您的真实姓名', trigger: 'blur' }],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 8, max: 15, message: '密码长度请在八位以上', trigger: 'blur' }
  ],
  mail: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    {
      pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
      message: '请输入正确的邮箱号',
      trigger: 'blur'
    }
  ],
  realNamee: [
    { required: true, message: '请输姓名', trigger: 'blur' },
  ]
})
const loginFormRule = reactive({
  username: [{ required: true, message: '请输入您的真实姓名', trigger: 'blur' }],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 8, max: 15, message: '密码长度请在八位以上', trigger: 'blur' }
  ],
})
// 注册
const addUser = (formEl) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      // 检测用户名是否已经存在
      const res1 = await API.user.hasUsername({ username: addForm.username })
      if (res1.data.success !== false) {
        // 注册
        const res2 = await API.user.addUser(addForm)
        // console.log(res2)
        if (res2.data.success === false) {
          ElMessage.warning(res2.data.message)
        } else {
          const res3 = await API.user.login({ username: addForm.username, password: addForm.password })
          const token = res3?.data?.data?.token
          // 将username和token保存到cookies中和localStorage中
          if (token) {
            setToken(token)
            setUsername(addForm.username)
            localStorage.setItem('token', token)
            localStorage.setItem('username', addForm.username)
          }
          ElMessage.success('注册登录成功！')
          router.push('/home')
        }
      } else {
        ElMessage.warning('用户名已存在！')
      }
    } else {
      return false
    }
  })

}
// 公众号验证码
const isWC = ref(false)
const verificationRef = ref()
const verification = reactive({
  code: ''
})
const verificationRule = reactive({
  code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
})
const verificationLogin = (formEl) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      const tempPassword = loginForm.password
      loginForm.password = verification.code
      const res1 = await API.user.login(loginForm)
      if (res1.data.code === '0') {
        const token = res1?.data?.data?.token
        // 将username和token保存到cookies中和localStorage中
        if (token) {
          setToken(token)
          setUsername(loginForm.username)
          localStorage.setItem('token', token)
          localStorage.setItem('username', loginForm.username)
        }
        ElMessage.success('登录成功！')
        router.push('/home')
      } else if (res1.data.message === '用户已登录') {
        // 如果已经登录了，判断一下浏览器保存的登录信息是不是再次登录的信息，如果是就正常登录
        const cookiesUsername = getUsername()
        if (cookiesUsername === loginForm.username) {
          ElMessage.success('登录成功！')
          router.push('/home')
        } else {
          ElMessage.warning('用户已在别处登录，请勿重复登录！')
        }
      } else {
        ElMessage.error('请输入正确的验证码!')
      }
      loginForm.password = tempPassword
    }
  })
}
// 登录
const login = (formEl) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      // 当域名为下面这两个时，弹出公众号弹框
      let domain = window.location.host
      if (domain === 'shortlink.magestack.cn' || domain === 'shortlink.nageoffer.com') {
        isWC.value = true
        return
      }
      const res1 = await API.user.login(loginForm)
      if (res1.data.code === '0') {
        const token = res1?.data?.data?.token
        // 将username和token保存到cookies中和localStorage中
        if (token) {
          setToken(token)
          setUsername(loginForm.username)
          localStorage.setItem('token', token)
          localStorage.setItem('username', loginForm.username)
        }
        ElMessage.success('登录成功！')
        router.push('/home')
      } else if (res1.data.message === '用户已登录') {
        // 如果已经登录了，判断一下浏览器保存的登录信息是不是再次登录的信息，如果是就正常登录
        const cookiesUsername = getUsername()
        if (cookiesUsername === loginForm.username) {
          ElMessage.success('登录成功！')
          router.push('/home')
        } else {
          ElMessage.warning('用户已在别处登录，请勿重复登录！')
        }
      } else if (res1.data.message === '用户不存在') {
        ElMessage.error('请输入正确的账号密码!')
      }
    } else {
      return false
    }
  })


}

const loading = ref(false)
// 是否记住密码
const checked = ref(true)
const vantaRef = ref()
// 动态背景
let vantaEffect = null
onMounted(() => {
  vantaEffect = WAVES({
    el: vantaRef.value,
    THREE: THREE,
    mouseControls: true,
    touchControls: true,
    gyroControls: false,
    minHeight: 200.0,
    minWidth: 200.0,
    scale: 1.0,
    scaleMobile: 1.0
  })
})
onBeforeUnmount(() => {
  if (vantaEffect) {
    vantaEffect.destroy()
  }
})
// 展示登录还是展示注册
const isLogin = ref(true)
const moveRef = ref() // 左右移动的切换按钮模块
const changeLogin = () => {
  let domain = window.location.host
  if (domain === 'shortlink.magestack.cn' || domain === 'shortlink.nageoffer.com') {
    ElMessage.warning('演示环境暂不支持注册')
    return
  }
  isLogin.value = !isLogin.value
  if (isLogin.value) {
    moveRef.value.style.transform = 'translateX(0)'
  } else {
    moveRef.value.style.transform = 'translateX(-122%)'
  }
}
</script>

<style lang="less" scoped>
// 科技风格背景动画
.tech-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  
  .tech-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
      linear-gradient(rgba(26, 26, 26, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(26, 26, 26, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: gridMove 20s linear infinite;
  }
  
  .tech-circles {
    position: absolute;
    width: 100%;
    height: 100%;
    
    .circle {
      position: absolute;
      border: 1px solid rgba(26, 26, 26, 0.1);
      border-radius: 50%;
      animation: circleFloat 15s ease-in-out infinite;
      
      &.circle-1 {
        width: 200px;
        height: 200px;
        top: 10%;
        left: 10%;
        animation-delay: 0s;
      }
      
      &.circle-2 {
        width: 150px;
        height: 150px;
        top: 60%;
        right: 15%;
        animation-delay: 5s;
      }
      
      &.circle-3 {
        width: 100px;
        height: 100px;
        bottom: 20%;
        left: 20%;
        animation-delay: 10s;
      }
    }
  }
  
  .tech-lines {
    position: absolute;
    width: 100%;
    height: 100%;
    
    .line {
      position: absolute;
      background: linear-gradient(90deg, transparent, rgba(26, 26, 26, 0.1), transparent);
      height: 1px;
      animation: lineMove 12s linear infinite;
      
      &.line-1 {
        width: 300px;
        top: 30%;
        left: -300px;
        animation-delay: 0s;
      }
      
      &.line-2 {
        width: 200px;
        top: 70%;
        right: -200px;
        animation-delay: 4s;
      }
      
      &.line-3 {
        width: 250px;
        bottom: 40%;
        left: -250px;
        animation-delay: 8s;
      }
    }
  }
}

@keyframes gridMove {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50px, 50px);
  }
}

@keyframes circleFloat {
  0%, 100% {
    transform: translateY(0px) scale(1);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-20px) scale(1.1);
    opacity: 0.6;
  }
}

@keyframes lineMove {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(calc(100vw + 300px));
    opacity: 0;
  }
}

.login-page {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

.login-container {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 20px;
}

.login-box {
  position: relative;
  width: 900px;
  height: 600px;
  background: var(--bg-primary);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-heavy);
  overflow: hidden;
  display: flex;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: loginAppear 0.8s ease-out;

  .form-header {
    text-align: center;
    margin-bottom: 24px;
    
    .header-icon {
      width: 50px;
      height: 50px;
      margin: 0 auto 12px;
      background: var(--bg-secondary);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--el-color-primary);
      
      svg {
        width: 28px;
        height: 28px;
      }
    }
    
    h2 {
      font-size: 24px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 6px;
      letter-spacing: 1px;
    }
    
    .subtitle {
      color: var(--text-secondary);
      font-size: 13px;
      margin: 0;
    }
  }

  .el-form-item {
    margin-bottom: 20px;
  }

  .form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    
    .remeber-password {
      color: var(--text-secondary);
    }
    
    .forgot-password {
      color: var(--el-color-primary);
      text-decoration: none;
      font-size: 14px;
      transition: all 0.3s ease;
      
      &:hover {
        color: var(--el-color-primary-light-3);
        text-decoration: underline;
      }
    }
  }

  .btn-group {
    text-align: center;
    
    .login-btn {
      width: 100%;
      height: 44px;
      border-radius: var(--radius-medium);
      font-weight: 500;
      letter-spacing: 0.5px;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-medium);
      }
      
      svg {
        width: 18px;
        height: 18px;
        transition: transform 0.3s ease;
      }
      
      &:hover svg {
        transform: translateX(4px);
      }
    }
  }
}

.input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--text-secondary);
  
  svg {
    width: 18px;
    height: 18px;
  }
}

.logon, .register {
  flex: 1;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.5s ease;
  min-width: 0; // 防止flex子项溢出
  max-height: 100%; // 确保不超出容器高度
  overflow-y: auto; // 如果内容过多，允许滚动
}

.hidden {
  animation: hidden 1s;
  animation-fill-mode: forwards;
}

@keyframes hidden {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  70% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 0;
    transform: translateX(-20px);
  }
}

@keyframes loginAppear {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.switch-panel {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 45%;
  background: var(--bg-dark);
  color: var(--text-light);
  border-radius: 0 var(--radius-large) var(--radius-large) 0;
  transition: all 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(0); // 初始位置
  
  .switch-content {
    text-align: center;
    padding: 40px;
    
    .switch-icon {
      width: 70px;
      height: 70px;
      margin: 0 auto 20px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-light);
      
      svg {
        width: 36px;
        height: 36px;
      }
    }
    
    h3 {
      font-size: 22px;
      font-weight: 600;
      margin-bottom: 10px;
      letter-spacing: 1px;
    }
    
    p {
      font-size: 15px;
      color: rgba(255, 255, 255, 0.8);
      margin-bottom: 28px;
      line-height: 1.6;
    }
    
    .switch-btn {
      background: var(--text-light);
      color: var(--text-primary);
      border: none;
      border-radius: var(--radius-medium);
      font-weight: 500;
      padding: 10px 28px;
      transition: all 0.3s ease;
      
      &:hover {
        background: var(--bg-secondary);
        transform: translateY(-2px);
        box-shadow: var(--shadow-medium);
      }
    }
  }
}

.title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 8%;
  z-index: 999;
  font-size: 48px;
  color: var(--text-primary);
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  letter-spacing: 2px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  animation: titleAppear 1s ease-out 0.3s both;
  pointer-events: none; // 防止标题阻挡交互
}

@keyframes titleAppear {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.vanta {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 0;
  opacity: 0.3;
}

// 表单样式优化
:deep(.el-form-item__content) {
  margin-left: 0 !important;
}

:deep(.el-input__wrapper) {
  border-radius: var(--radius-medium);
  border: 1px solid var(--border-primary);
  transition: all 0.3s ease;
  background: var(--bg-primary);
  
  &:hover {
    border-color: var(--border-dark);
    box-shadow: var(--shadow-light);
  }
  
  &.is-focus {
    border-color: var(--el-color-primary);
    box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.1);
  }
}

:deep(.el-input__inner) {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  color: var(--text-primary);
  height: 44px;
}

:deep(.el-input__inner::placeholder) {
  color: var(--text-tertiary);
}

:deep(.el-input__suffix-inner) {
  width: 60px;
}

.form-container1 {
  transform: translateY(-10px); // 进一步减少向上偏移
}

.second-font {
  margin-left: 13px;
}

.verification-flex {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  .img {
    margin-top: 10px;
    align-self: center;
    border-radius: var(--radius-medium);
  }
  
  .form {
    transform: translateY(15px);
    width: 90%;
  }
}

// 对话框样式
:deep(.tech-dialog) {
  .el-dialog {
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-heavy);
    
    .el-dialog__header {
      border-bottom: 1px solid var(--border-primary);
      padding: var(--spacing-lg) var(--spacing-xl);
      
      .el-dialog__title {
        color: var(--text-primary);
        font-weight: 600;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
      }
    }
    
    .el-dialog__body {
      padding: var(--spacing-xl);
    }
    
    .el-dialog__footer {
      border-top: 1px solid var(--border-primary);
      padding: var(--spacing-lg) var(--spacing-xl);
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .login-container {
    padding: 10px;
  }
  
  .login-box {
    width: 95%;
    height: auto;
    min-height: 500px;
    flex-direction: column;
    
    .logon, .register {
      padding: 32px 24px;
    }
    
    .switch-panel {
      position: relative;
      width: 100%;
      height: auto;
      border-radius: 0;
      
      .switch-content {
        padding: 24px;
      }
    }
  }
  
  .title {
    font-size: 32px;
    top: 5%;
  }
}

// 确保登录框在小屏幕上也能正常显示
@media (max-width: 1024px) {
  .login-box {
    width: 95%;
    max-width: 900px;
  }
  
  .title {
    font-size: 40px;
  }
}

// 针对注册表单的特殊优化
.register {
  .el-form-item {
    margin-bottom: 15px; // 减少注册表单的间距
  }
  
  .form-header {
    margin-bottom: 20px;
  }
  
  .btn-group {
    margin-top: 10px; // 确保按钮有足够空间
  }
  
  // 整体上移注册表单
  transform: translateY(-12px);
}
</style>
